<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	
	<style type="text/css">
		.pic-normal {
			width: 120px;
			border: 2px solid #ACBECE;

		}
		.wrap1 {
			width:190px;
			height: 130px;
			float: left;			
		}
	</style>
	
			
	<rich:separator lineType="solid" height="1" />
	<h:outputText value="This demo shows how to attach the mouseover/mouseout events to the
	DOM objects. However the images below show how to make them enlarged." />
	
	<rich:separator lineType="solid" height="1" style="padding-bottom:10px;" />
	
	<a4j:outputPanel id="gallery">
		<h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic2.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic3.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic4.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic5.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic6.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic7.jpg" />
		<h:graphicImage value="/richfaces/jQuery/images/pic8.jpg" />
	</a4j:outputPanel>	
	
	<br style="clear:both" />


	<rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
	<rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;')" />
	<rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
	<rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>
	
	<rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" />
	<rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" />
	
	

</ui:composition>